<template>
    <div class="baseloyal">
        <div class="title">
            <i :class="['iconfont',icon]"></i>
            <span class="titelcon">{{titleText}}</span>
        </div>
        <div class="cont">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "baseloyal",
        props: ['icon','titleText']
    }
</script>

<style lang="less" scoped>
.baseloyal{
    display: flex;
    .title{
        height: 100%;
        background-color: rgba(32,71,160,.6);
        padding: 0 16px;
        color: #fff;
        display: flex;
        align-items: center;
        .iconfont{
            color: #fff;
            font-size: 32px;
        }
        .titelcon{
            padding-left: 10px;
            font-size: 20px;
        }
    }
    .cont{
        flex: 1 1 auto;
        height: 100%;
        display: flex;
        padding: 6px 16px;
    }
}
</style>
